/* eslint max-len: 0 */
import React, { FC } from 'react';
import { cx } from '@emotion/css';
import { useTheme } from '@grafana/ui';
import { SvgProps } from './Icons.types';
import { getStyles } from './Icons.styles';

export const Database: FC<SvgProps> = ({ className, ...rest }) => {
  const theme = useTheme();
  const styles = getStyles(theme);

  return (
    <svg
      width="31"
      height="38"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cx(className, styles.icon)}
      {...rest}
    >
      <path
        d="M31 3.29163V34.2712c0 1.814-6.9398 3.2916-15.5 3.2916-8.56016 0-15.5-1.4776-15.5-3.2916V3.29163h31z"
        fill="#C2C2C2"
      />
      <path
        d="M31 13.4516v2.1604c-4.6469 1.8037-14.1141 1.8751-15.5 1.8751-1.3859 0-10.86325-.0714-15.5-1.8751v-2.1502c1.67127.8356 6.86851 1.9871 15.5 1.9871 8.6315 0 13.8491-1.1617 15.5-1.9973zm0 10.5371v2.1808c-4.6469 1.7936-14.1141 1.8649-15.5 1.8649-1.3859 0-10.86325-.0713-15.5-1.8649v-2.1706c1.67127.8458 6.86851 2.0381 15.5 2.0381 8.6315 0 13.8491-1.2025 15.5-2.0483z"
        fill="#2E6FD4"
      />
      <path
        d="M15.5 6.58317c8.5604 0 15.5-1.47369 15.5-3.29158C31 1.47369 24.0604 0 15.5 0 6.93958 0 0 1.47369 0 3.29159c0 1.81789 6.93958 3.29158 15.5 3.29158z"
        fill="#DBDBDB"
      />
      <path
        d="M25.8333 11.1996c.7147 0 1.2942-.5886 1.2942-1.31463s-.5795-1.3146-1.2942-1.3146c-.7148 0-1.2942.58857-1.2942 1.3146s.5794 1.31463 1.2942 1.31463zM25.8333 21.7367c.7147 0 1.2942-.5886 1.2942-1.3146s-.5795-1.3146-1.2942-1.3146c-.7148 0-1.2942.5886-1.2942 1.3146s.5794 1.3146 1.2942 1.3146zM25.8333 32.284c.7147 0 1.2942-.5886 1.2942-1.3146s-.5795-1.3146-1.2942-1.3146c-.7148 0-1.2942.5886-1.2942 1.3146s.5794 1.3146 1.2942 1.3146z"
        fill="#202C35"
      />
    </svg>
  );
};
